<script >
import StatiscalNav from './Statiscal/StatiscalNav.vue'
import StatiscalChart from './Statiscal/StatiscalChart.vue'
import StatiscalList from './Statiscal/StatiscalList.vue'
import {getSaleData} from '../api/saledata'
export default { 
    name: 'StatiscalCard',
    components: {
        StatiscalNav,
        StatiscalChart,
        StatiscalList
    },
    data() {
        return {
            saleData: {},
            chooseIndex:1
        }
    },

    mounted() {
         getSaleData().then(res => {
            this.saleData = res
            console.log(this.saleData)
        })

        
    },
    methods: {
        changeIndex(index) {
            this.chooseIndex = index
            console.log(this.chooseIndex)
        }
    }

}
</script> 
<template> 
    <el-card style="margin-left: 10px;margin-right: 10px;"> 
       <StatiscalNav @select="changeIndex"></StatiscalNav>
       <div class='chart-container'>
        <StatiscalChart :data="saleData" :chooseIndex="chooseIndex"></StatiscalChart>
        <StatiscalList :data="saleData" :chooseIndex="chooseIndex"></StatiscalList>
       </div>
    </el-card> 
</template>
 <style scoped>
 .chart-container {
    display: flex;
    margin-top: 20px;
 }
</style>